import styled from "styled-components";
import { px2rem } from "../../../assets/global-style";

export const IconWrapper = styled.div`
    padding-top: ${px2rem(45)};
    .menu {
        width: 100%;
        padding: 0.2rem 0.2rem 0;
    }
    .menu-box {
        display: flex;
        /* display: inline-block; */
        flex: 1;
        flex-direction: row;
        
        flex-wrap: wrap;
        justify-content: space-around;
        padding-top: 10px;
    }
    .menu-content {
        display: flex;
        /* flex: 1; */
        width: ${px2rem(170)};
        height: ${px2rem(80)};
        margin-bottom: ${px2rem(12)};
        border-radius: 10px;
        background-color: #F5F5F5;
        .title {
            width: ${px2rem(90)};
            padding: ${px2rem(10)};
            p {
                font-size: 16px;
                font-weight: 600;
            }
            span {
                font-size: 10px;
            }
        }
        .image {
            
        }
    }
    .icon-box {  
        width: 100%;
        height: ${px2rem(60)};
        display: flex;
        margin-top: ${px2rem(8)};
    }
    .icon-list {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        span {
            color: black;
            font-size: 8px;
        }
    }
    .icon {
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: -0.15rem;
        fill: currentColor;
        overflow: hidden;
        text-align: center;
    }
`